<!--固件管理-->
<template>
  <div class="firmware-manage">
    <div>
      <div class="title">固件管理</div>
      <el-form ref="form" :inline="true" class="search-form">
        <el-col :span="24">
          <el-form-item label="固件名称">
            <el-input v-model="formSearch.name" placeholder="请输入固件名称" clearable />
          </el-form-item>
          <el-form-item label="固件Key">
            <el-input v-model="formSearch.componentInfoId" placeholder="请输入固件Key" clearable />
          </el-form-item>
          <el-form-item label="固件类型">
            <el-select v-model="formSearch.componentType" clearable>
              <el-option
                v-for="item in firmwareTypeOptions"
                :key="item.type"
                :label="item.name"
                :value="item.type" />
            </el-select>
          </el-form-item>
          <el-button
            type="primary"
            size="14"
            @click="queryFirmwareManageList()">查询</el-button>
          <el-button
            type="primary"
            size="14"
            @click="resetSearch()">重置</el-button>
          <el-button
            type="primary"
            size="14"
            class="add-version-btn"
            @click="handleAddFirmware">新建固件</el-button>
        </el-col>
      </el-form>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#F5F6F7' }"
        size="medium">
        <el-table-column prop="id" label="固件Key"> </el-table-column>
        <el-table-column prop="linkedProductCount" label="已关联产品">
          <template slot-scope="scope">
            <span class="linked" @click="handleLinkedProduct(scope.row)">{{ scope.row.linkedProductCount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="固件名称"> </el-table-column>
        <el-table-column prop="componentTypeName" label="固件类型"> </el-table-column>
        <el-table-column prop="currentFirmwareVersion" label="最新版本"> </el-table-column>
        <el-table-column prop="updateTime" label="创建/更新时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" :disabled="rolesCode === 'SALE'" size="operate" @click="jumpDetails(scope.row)">详情</el-button>
            <el-button type="text" :disabled="rolesCode === 'SALE'" size="operate" @click="handleAddVersion(scope.row)">新建版本</el-button>
            <el-button type="text" :disabled="rolesCode === 'SALE'" size="operate" @click="handleDetele(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
      <addFirmwareDialog
        ref="addFirmware"
        :query-firmware-manage-list="queryFirmwareManageList"
        page-type="firmwareManage"
      />
      <addOrEditFirmwareVersion
        ref="addOrEditFirmwareVersion"
        :add-or-edit-type="addOrEditType"
        :query-firmware-manage-list="queryFirmwareManageList"
        page-type="firmwareManage"
        :rows-data="rowsData"
      />
    </div>
  </div>
</template>
<script>
import { getComponentList, firmwareType, deleteManageList } from "@/api/product/firmware"
import addFirmwareDialog from './addFirmwareDialog.vue'
import addOrEditFirmwareVersion from './firmwareDetails/addOrEditFirmwareVersion.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'firmwareDevelopDetails',
  components: { addFirmwareDialog, addOrEditFirmwareVersion },
  data() {
    return {
      editInfoVisible: false, // 编辑固件基本信息弹窗是否显示
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 列表数据总条数
      loading: false,
      formSearch: {
        name: '', // 固件名称
        componentInfoId: '', // 固件Key
        componentType: '' // 固件类型
      },
      firmwareTypeOptions: [], // 固件类型下拉选项
      addOrEditType: 'add', // 新建或编辑固件版本
      rowsData: {} // 选中行数据
    }
  },
  computed: {
    ...mapGetters(['rolesCode'])
  },
  created() {
    this.queryFirmwareManageList()
    this.getFirmwareType()
  },
  destroyed() {
    const url = this.$route.path
    if (!url.includes('/product/product-details/')) {
      sessionStorage.removeItem('activeName')
    }
  },
  methods: {
    // 固件管理列表
    queryFirmwareManageList() {
      this.loading = true
      const params = {
        current: this.currentPage,
        size: this.pageSize,
        ...this.formSearch
      }
      getComponentList(params).then(res => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      }).catch(err => {
        this.$message.error(err.message)
      }).finally(() => {
        this.loading = false
      })
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.queryFirmwareManageList()
    },
    // 当前页变时触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryFirmwareManageList()
    },
    // 获取固件类型
    getFirmwareType() {
      firmwareType().then(res => {
        this.firmwareTypeOptions = res.data.data
      }).catch(err => {
        this.$message.error(err || '请求异常')
      })
    },
    // 重置查询条件
    resetSearch() {
      this.formSearch = {
        name: '', // 固件名称
        componentInfoId: '', // 固件Key
        componentType: '' // 固件类型
      }
      this.currentPage = 1
      this.queryFirmwareManageList()
    },
    // 返回固件列表
    goBack() {
      this.$router.go(-1)
    },
    // 新建固件
    handleAddFirmware() {
      this.$refs.addFirmware.dialogVisible = true
    },
    // 关联产品
    handleLinkedProduct(row) {
      this.$router.push({
        path: "/product/product-details/firmware/relatedProducts",
        query: {
          id: row.id,
          name: row.name
        }
      })
    },
    // 跳转详情
    jumpDetails(row) {
      this.$router.push({
        path: "/product/product-details/firmware/firmwareDetails/firmwareDetails",
        query: {
          componentInfoId: row.id,
          version: row.version,
          rowsData: JSON.stringify(row)
        }
      })
    },
    // 新建固件版本
    handleAddVersion(row) {
      this.rowsData = row
      this.addOrEditType = 'add'
      this.$refs.addOrEditFirmwareVersion.firmwareVersionVisible = true
    },
    // 删除
    handleDetele(row) {
      const params = {
        componentIdList: [row.id]
      }
      deleteManageList(params).then(res => {
        this.queryFirmwareManageList()
      }).catch(err => {
        this.$message.error(err.message)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.firmware-manage {
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #252525;
  }

  .search-form {
    margin-top: 20px;

    .add-version-btn {
      float: right;
    }
  }

  .linked {
    color: #275fe8;
    cursor: pointer;
  }
}
</style>
